<template>
  <div class="avatar">
    <fx-card title="基础用法">
      <ul class="list">
        <li>
          <fx-avatar :src="author" size="large" class="mr20"/>
        </li>
        <li>
          <fx-avatar :src="author" size="middle" class="mr20"/>
        </li>
        <li>
          <fx-avatar :src="author" size="default" class="mr20"/>
        </li>
        <li>
          <fx-avatar :src="author" size="mini" class="mr20"/>
        </li>
      </ul>
      <ul class="list">
        <li>
          <fx-avatar :src="avatar" size="large" class="mr20" shape="square"/>
        </li>
        <li>
          <fx-avatar :src="avatar" size="middle" class="mr20" shape="square"/>
        </li>
        <li>
          <fx-avatar :src="avatar" size="default" class="mr20" shape="square"/>
        </li>
        <li>
          <fx-avatar :src="avatar" size="mini" class="mr20" shape="square"/>
        </li>
      </ul>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="展示类型">
      <fx-avatar :src="author" class="mr20"></fx-avatar>
      <fx-avatar icon="icon-user" class="mr20"></fx-avatar>
      <fx-avatar class="mr20">user</fx-avatar>
      <template #hide>
        <pre v-highlight="type"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="图片加载失败">
      <fx-avatar src="http://error" size="large" class="mr20">
        <i class="iconfont icon-user fs30"/>
      </fx-avatar>
      <template #hide>
        <pre v-highlight="error"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="图片如何适应容器框">
      <fx-avatar :src="fit" fit="fill" :size="100" shape="square" class="mr20"></fx-avatar>
      <fx-avatar :src="fit" fit="contain" :size="100" shape="square" class="mr20"></fx-avatar>
      <fx-avatar :src="fit" fit="cover" :size="100" shape="square" class="mr20"></fx-avatar>
      <fx-avatar :src="fit" fit="none" :size="100" shape="square" class="mr20"></fx-avatar>
      <fx-avatar :src="fit" fit="scale-down" :size="100" shape="square" class="mr20"></fx-avatar>
      <template #hide>
        <pre v-highlight="objectFit"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="背景色">
      <fx-avatar :src="fit" fit="contain" :size="100" shape="square" class="mr20" is-background></fx-avatar>
      <fx-avatar :src="fit" fit="contain" :size="100" shape="square" class="mr20" is-background background="#999"/>
      <template #hide>
        <pre v-highlight="background"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

const Author = new URL('../../assets/author.jpg', import.meta.url).href
const Avatar = new URL('../../assets/avatar.jpg', import.meta.url).href
const Monkey = new URL('../../assets/1.jpg', import.meta.url).href

export default defineComponent({
  name: 'viewAvatar',
  setup () {
    const author = Author
    const avatar = Avatar
    const fit = Monkey

    const base = `<ul class="list">
  <li>
    <fx-avatar :src="author" size="large" class="mr20"/>
  </li>
  <li>
    <fx-avatar :src="author" size="middle" class="mr20"/>
  </li>
  <li>
    <fx-avatar :src="author" size="default" class="mr20"/>
  </li>
  <li>
    <fx-avatar :src="author" size="mini" class="mr20"/>
  </li>
</ul>
<ul class="list">
  <li>
    <fx-avatar :src="avatar" size="large" class="mr20" shape="square"/>
  </li>
  <li>
    <fx-avatar :src="avatar" size="middle" class="mr20" shape="square"/>
  </li>
  <li>
    <fx-avatar :src="avatar" size="default" class="mr20" shape="square"/>
  </li>
  <li>
    <fx-avatar :src="avatar" size="mini" class="mr20" shape="square"/>
  </li>
</ul>`
    const type = `<fx-avatar :src="author" class="mr20"></fx-avatar>
<fx-avatar icon="icon-user" class="mr20"></fx-avatar>
<fx-avatar class="mr20">user</fx-avatar>`
    const error = `<fx-avatar src="http://error" size="large" class="mr20">
  <i class="iconfont icon-user fs30"/>
</fx-avatar>`
    const objectFit = `<fx-avatar :src="fit" fit="fill" :size="100" shape="square" class="mr20"></fx-avatar>
<fx-avatar :src="fit" fit="contain" :size="100" shape="square" class="mr20"></fx-avatar>
<fx-avatar :src="fit" fit="cover" :size="100" shape="square" class="mr20"></fx-avatar>
<fx-avatar :src="fit" fit="none" :size="100" shape="square" class="mr20"></fx-avatar>
<fx-avatar :src="fit" fit="scale-down" :size="100" shape="square" class="mr20"></fx-avatar>`
    const background = `<fx-avatar :src="fit" fit="contain" :size="100" shape="square" class="mr20" is-background></fx-avatar>
<fx-avatar :src="fit" fit="contain" :size="100" shape="square" class="mr20" is-background background="#999"/>`

    return {
      author,
      avatar,
      fit,
      base,
      type,
      objectFit,
      error,
      background
    }
  }
})
</script>

<style scoped lang="scss">
.avatar {
  .list {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
}
</style>
